Tengo entendido que cambiar la propiedad de transform en los elementos DOM debería ser rápido, ya que no forzará el diseño ni el repintado. Pero las cosas parecen un poco lentas, y el perfilado apunta a cambiar la transform como el culpable.

Tengo este código que actualiza el elemento DOM de una partícula según sus propiedades:

 const applyCSSToParticle = (particle) => { const { elem, x, y, z, rot } = particle elem.style.transform = 'translateX(' + x + 'px) translateY(' + y + 'px) rotate(' + rot + 'deg) scale(' + z + ')' }

Y es llamado por esta función:

 const applyPhysics = () => { requestAnimationFrame(applyPhysics) particles.forEach((particle, i) => { const { id, elem, text, x, y, z, xVel, yVel, zVel, rot, rVel } = particle particle.x += xVel * z particle.y += yVel * z particle.z = Math.min(z + zVel, maxZ) particle.rot += rVel applyCSSToParticle(particle) })

Cuando perfilo mi código, veo que aproximadamente el 30 % del tiempo se dedica a applyCSSToParticle() . ¿Alguna idea sobre cómo acelerar esto?